<template>
    <view class="activity-registration">
        
        <view class="registration-container">
            <!-- 表单区域 -->
            <view class="form-section">
                <!-- 自己报名表单 -->
                <view class="form-type">
                    <text class="form-label">报名类型</text>
                        <view class="radio-group">
                        <u-radio-group v-model="registrationType" placement="row">
                            <u-radio 
                                name="1" 
                                label="自己报名"
                                activeColor="#007AFF"
                                size="28rpx"
                            ></u-radio>
                            <u-radio 
                                class="radio-item"
                                name="2" 
                                label="代人报名"
                                activeColor="#007AFF"
                                size="28rpx"
                            ></u-radio>
                        </u-radio-group>
                    </view>
                </view>
                <view v-if="registrationType === '1'" class="form-fields">
                    <view class="form-item">
                        <text class="form-label">姓名</text>
                        <input 
                            class="form-input" 
                            v-model="formData.name"
                            placeholder="请输入真实姓名"
                            maxlength="20"
                        />
                    </view>
                    <view class="form-item">
                        <text class="form-label">电话</text>
                        <input 
                            class="form-input" 
                            v-model="formData.phone"
                            placeholder="请输入电话"
                            type="number"
                            maxlength="11"
                        />
                    </view>
                    <view class="form-item">
                        <text class="form-label">参加人数</text>
                        <input 
                            class="form-input" 
                            v-model="formData.participantCount"
                            placeholder="请输入人数"
                            type="number"
                        />
                    </view>
                </view>

                <!-- 代人报名表单 -->
                <view v-if="registrationType === '2'" class="form-fields">
                    <view class="form-item">
                        <text class="form-label">姓名</text>
                        <input 
                            class="form-input" 
                            v-model="formData.name"
                            placeholder="请输入真实姓名"
                            maxlength="20"
                        />
                    </view>
                    <view class="form-item">
                        <text class="form-label">电话</text>
                        <input 
                            class="form-input" 
                            v-model="formData.phone"
                            placeholder="请输入电话"
                            type="number"
                            maxlength="11"
                        />
                    </view>
                    <view class="form-item">
                        <text class="form-label">参加人数</text>
                        <input 
                            class="form-input" 
                            v-model="formData.participantCount"
                            placeholder="请输入人数"
                            type="number"
                        />
                    </view>
                    <view class="form-item">
                        <text class="form-label">参加人</text>
                        <input 
                            class="form-input" 
                            v-model="formData.participantName"
                            placeholder="请输入参加人姓名"
                            maxlength="20"
                        />
                    </view>
                </view>
            </view>

            <!-- 提示信息 -->
            <view class="note-section">
                <text class="note-text">注:提交之后,平台会尽快审核。请您耐心等待,避免重复多次提交</text>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-section">
                <button 
                    class="submit-btn" 
                    :class="{ disabled: !canSubmit }"
                    @click="handleSubmit"
                    :disabled="!canSubmit"
                >
                    提交
                </button>
            </view>
        </view>
    </view>
</template>

<script>
import { postCommunityactivityRegister } from '@/api/index.js'

export default {
    name: 'ActivityRegistration',
    data() {
        return {
            activityId: '',
            registrationType: '1', // '1' 或 '2'
            formData: {
                name: '',
                phone: '',
                participantCount: '',
                participantName: '' // 仅代人报名时使用
            }
        }
    },
    computed: {
        canSubmit() {
            if (this.registrationType === '1') {
                return this.formData.name && this.formData.phone && this.formData.participantCount
            } else {
                return this.formData.name && this.formData.phone && this.formData.participantCount && this.formData.participantName
            }
        }
    },
    onLoad(options) {
        this.activityId = options.id || ''
    },
    watch: {
        registrationType() {
            // 切换类型时清空表单
            this.resetForm()
        }
    },
    methods: {
        resetForm() {
            this.formData = {
                name: '',
                phone: '',
                participantCount: '',
                participantName: ''
            }
        },
        
        validateForm() {
            if (!this.formData.name.trim()) {
                uni.showToast({ title: '请输入姓名', icon: 'none' })
                return false
            }
            
            if (!this.formData.phone.trim()) {
                uni.showToast({ title: '请输入电话', icon: 'none' })
                return false
            }
            
            if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
                uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
                return false
            }
            
            if (!this.formData.participantCount || parseInt(this.formData.participantCount) <= 0) {
                uni.showToast({ title: '请输入正确的参加人数', icon: 'none' })
                return false
            }
            
            if (this.registrationType === 'proxy' && !this.formData.participantName.trim()) {
                uni.showToast({ title: '请输入参加人姓名', icon: 'none' })
                return false
            }
            
            return true
        },
        
        async handleSubmit() {
            if (!this.validateForm()) {
                return
            }
            
            try {
                
                // 构建提交数据
                const submitData = {
                    activity_id: this.activityId,
                    register_type: this.registrationType,
                    registration_name: this.formData.name.trim(),
                    phone: this.formData.phone.trim(),
                    participant_count: parseInt(this.formData.participantCount)
                }
                
                if (this.registrationType == '2') {
                    submitData.participant_name = this.formData.participantName.trim()
                }
                
                // TODO: 调用报名API
                const res = await postCommunityactivityRegister(submitData)
                if (res.errno == 0) {
                    uni.showToast({ title: '提交成功', icon: 'success' })
                    this.resetForm()
                     uni.redirectTo({
                        url: `/views/community/activity-registration-success?id=${this.activityId}`
                    })
                } else {
                    uni.showToast({ title: res.msg || '提交失败，请重试', icon: 'none' })
                }
                
                // 延迟返回上一页
               
                
            } catch (error) {
                uni.hideLoading()
                uni.showToast({ title: '提交失败，请重试', icon: 'none' })
                console.error('报名提交失败:', error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.activity-registration {
    min-height: 100vh;
    background: #f5f5f5;
}

.registration-container {
    padding: 20rpx;
}

.registration-type-section {
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding: 38rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .section-title {
        font-size: 28rpx;
        color: #333;
    }
}

.radio-item {
    margin-left: 20rpx;
}

.form-section {
    background: #fff;
    padding: 0 24rpx 0rpx 24rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    
    .form-type {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 45rpx 0;
        font-size: 28rpx;
        color: #333;
    }
            .form-fields {
            .form-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 30rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

                &:first-child {
                    border-top: 1rpx solid #f0f0f0;
                }
                
                &:last-child {
                    border-bottom: none;
                }
                
                .form-label {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                    min-width: 120rpx;
                }
                
                .form-input {
                    flex: 1;
                    height: 60rpx;
                    background: transparent;
                    border: none;
                    font-size: 28rpx;
                    color: #333;
                    text-align: right;
                    padding: 0;
                    
                    &::placeholder {
                        color: #999;
                        text-align: right;
                    }
                    
                    &:focus {
                        outline: none;
                    }
                }
            }
        }
}

.note-section {
    margin-bottom: 40rpx;
    
    .note-text {
        font-size: 24rpx;
        color: #999;
        line-height: 1.5;
    }
}

.submit-section {
    padding: 0 24rpx;
    
    .submit-btn {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(90deg, #007AFF 0%, #0056CC 100%);
        border-radius: 44rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
        transition: all 0.3s ease;
        
        &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
        }
        
        &.disabled {
            background: #ccc;
            box-shadow: none;
            transform: none;
        }
    }
}
</style>